<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>秒表</title>
    <style>
        @keyframes tick {
            from {transform: translateY(0%);}
            to {transform: translateY(-100%);}
        }

        @keyframes hide {
            from {visibility: visible;}
            to {visibility: hidden;}
        }

        @keyframes show {
            from {visibility: hidden;}
            to {
                visibility: visible;
                content: "It's timeout now.";
            }
        }
        @keyframes blink {
            from {color: red;}
            to {color: transparent;}
        }

        body {
            overflow: hidden;
        }

        .container {
            text-align: center;
        }

        .message-container {
            position: relative;
        }

        .digit-board {
            position: relative;
            height: 2rem;
            overflow: hidden;
            animation: hide 1ms 18s forwards;
        }

        .timeout {
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
        }

        .timeout:before {
            content: "";
            animation: show 1ms 18s forwards, blink 1.2s 18s both infinite;
        }

        .minute, .second, .centi-second {
            display: inline-block;
            vertical-align: text-top;
            animation: tick 1s steps(10, end);
            /*animation-timing-function: ease-in-out !important;*/
        }

        .minute span, .second span, .centi-second span {
            display: block;
            height: 2rem;
        }

        .minute, .second {
            animation-timing-function: steps(6, end);
        }

        .minute + .minute, .second + .second, .centi-second {
            animation-timing-function: steps(10, end);
        }

        .minute {
            animation-iteration-count: 1;
            animation-duration: 18s;
            animation-timing-function: steps(3, end);
        }

        .minute + .minute {
            animation-iteration-count: 3;
            animation-duration: 6s;
            /*animation-timing-function: linear;*/
        }

        .second {
            animation-iteration-count: calc(3 * 10);
            animation-duration: 0.6s;
        }

        .second + .second {
            animation-iteration-count: calc(3 * 60);
            animation-duration: 0.1s;
        }

        .centi-second {
            animation-iteration-count: calc(3 * 600);
            animation-duration: 10ms;
        }

        .centi-second + .centi-second {
            animation-iteration-count: calc(3 * 6000);
            animation-duration: 1ms;
        }
    </style>
</head>
<body>
<div class="container">
    <div>
        时间流速*100倍，方便查看效果
    </div>
    <br>
    <div class="message-container">
        <div class="digit-board">
            <div class="minute">
                <span>2</span>
                <span>1</span>
                <span>0</span>
            </div>
            <div class="minute">
                <span>9</span>
                <span>8</span>
                <span>7</span>
                <span>6</span>
                <span>5</span>
                <span>4</span>
                <span>3</span>
                <span>2</span>
                <span>1</span>
                <span>0</span>
            </div>
            :
            <div class="second">
                <span>5</span>
                <span>4</span>
                <span>3</span>
                <span>2</span>
                <span>1</span>
                <span>0</span>
            </div>
            <div class="second">
                <span>9</span>
                <span>8</span>
                <span>7</span>
                <span>6</span>
                <span>5</span>
                <span>4</span>
                <span>3</span>
                <span>2</span>
                <span>1</span>
                <span>0</span>
            </div>
            &nbsp;
            <div class="centi-second">
                <span>9</span>
                <span>8</span>
                <span>7</span>
                <span>6</span>
                <span>5</span>
                <span>4</span>
                <span>3</span>
                <span>2</span>
                <span>1</span>
                <span>0</span>
            </div>
            <div class="centi-second">
                <span>9</span>
                <span>8</span>
                <span>7</span>
                <span>6</span>
                <span>5</span>
                <span>4</span>
                <span>3</span>
                <span>2</span>
                <span>1</span>
                <span>0</span>
            </div>
            <span>'</span>
        </div>
        <div class="timeout"></div>
    </div>
</div>
</body>
</html>